<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品供应商管理系统首页</title>
    <link href="../static/bootstrap-5.3.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="lib/bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="lib/overlayscrollbars/styles/overlayscrollbars.min.css">
    <link rel="stylesheet" href="dist/css/bootstrap-admin.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>
        li{list-style: none;}
        a:visited{color:white;}
    </style>
</head>
<body>
<div class="col-10 pt-2">
    <div class="row text-center">
        <div class="col-3">
            <a href="/suppliersAdd" data-toggle="modal" data-target="#modalAdd" class="btn btn-warning text-align:right">新增</a>
        </div><div class="row">  </div>
        <table class="table table-bordered text-center">
            <thead>
            <th>序号</th>
            <th>供应商</th>
            <th>供应地</th>
            <th>电话号</th>
            <th>管理</th>
            </thead>
            <tbody>
            <tr th:each="suppliers:${data}">
                <td th:text="${suppliers.id}"></td>
                <td th:text="${suppliers.name}"></td>
                <td th:text="${suppliers.addr}"></td>
                <td th:text="${suppliers.phone}"></td>
                <td>
                    <button class="btn btn-danger" th:onclick="del([[${suppliers.id}]])">删除</button>
                    <button data-toggle="modal" data-target="#modalUpdate" class="btn btn-info" th:onclick="update([[${suppliers.id}]],[[${suppliers.name}]],[[${suppliers.addr}]],[[${suppliers.phone}]])">更新</button>

                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- 定义一个新增的子窗体模态框（Modal）HTML代码 -->
<div class="modal fade" id="modalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">新增供应商</h4>
            </div>
            <div class="modal-body">
                <!--                    新增表单区&ndash;&gt;-->
                <form method="post" action="/suppliersAddProcess">
                    <div class="form-control">
                        <label >供应商名称</label>
                        <input type="text" name="name">
                    </div>
                    <div class="form-control">
                        <label >供应商地址</label>
                        <input type="text" name="addr">
                    </div>
                    <div class="form-control">
                        <label >供应商电话</label>
                        <input type="text" name="phone">
                    </div>
                    <div class="form-control">
                        <input type="submit" value="提交" class="btn btn-primary">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="modalUpdate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" >更新供应商</h4>
            </div>
            <div class="modal-body">
<!--                <form method="post" action="/api/suppliersUpdateProcess">-->
                    <div class="form-control">
                        <label >供应商序号</label>
                        <input type="text" name="id" id="id" disabled="disabled">
                    </div>
                    <div class="form-control">
                        <label >供应商名称</label>
                        <input type="text" name="name" id="name" >
                    </div>
                    <div class="form-control">
                        <label >供应商地址</label>
                        <input type="text" name="addr" id="addr">
                    </div>
                    <div class="form-control">
                        <label >供应商电话</label>
                        <input type="text" name="phone" id="phone">
                    </div>
                    <div class="form-control">
                        <button id="genggai">更新</button>
<!--                        <input type="submit" value="更新" class="btn btn-primary">-->
                    </div>
<!--                </form>-->
            </div>
        </div>
    </div>
</div>

</body>
</html>
<script>
    function del(id){
        var flag=confirm("是否删除该条供应商记录？");
        if (flag==true){
            $.post("/api/suppliersDelete",{'id':id},function (res){
                console.log(res)
                if (res==1){
                    alert("删除成功");
                    location.reload()
                }else {
                    alert("删除失败");
                    location.reload();
                }
            })


        }


    }
    function  update(id,name,addr,phone){
//    肯定有了这个商品的信息，包括商品的所有字段值
        console.log(id,name,addr,phone)
//     单独去给更新代码块的表单value赋值
        $('#id').val(id);
        $('#name').val(name);
        $('#addr').val(addr);
        $('#phone').val(phone);
//     去使用ajax方式提交处理
    }
    // 提交更新处理
    $('#genggai').click(function(){
        var flag = confirm("确认提交更新?");
        if(flag==true){
            $.post("/api/suppliersUpdateProcess",{"id":$('#id').val(),"name":$('#name').val(),"addr":$('#addr').val(),
                "phone":$('#phone').val()
            },function(res){
                console.log(res)
                if(res==1){
                    alert("更新ok");
                    location.href="/suppliers";
                }else{
                    alert("更新失败!");
                }
            })
        }
    })
</script>
